import { PageProps } from "maishu-chitu-react";
import React = require("react");
import { ShoppingService } from "mobile/services/shoppingService";
import { defaultNavBar } from "mobile/site";
import * as ui from "maishu-ui-toolkit";
import { SpinerState, SpinerComponent } from 'controls/spiner-component';

interface Props extends PageProps {

}

interface State extends SpinerState {
    coupons: Coupon[]
}

export default class StoreCouponsPage extends SpinerComponent<Props, State>{
    shopping: ShoppingService;
    constructor(props) {
        super(props);

        this.shopping = this.props.createService(ShoppingService)
    }
    async loadData(): Promise<Partial<State>> {
        let coupons = await this.shopping.storeCoupons();
        return { coupons }
    }
    receiveCoupon(coupon: Coupon): Promise<any> {
        return this.shopping.receiveCoupon(coupon.Id);
    }
    render() {
        let coupons = this.state.coupons;
        return <>
            <header>
                {defaultNavBar(this.props.source, { title: '店铺优惠劵' })}
            </header>
            <section>
                {coupons.length > 0 ?
                    <hr />
                    :
                    <div className="norecords">
                        <div className="icon">
                            <i className="icon-money">

                            </i>
                        </div>
                        <h4 className="text">暂无可领取的优惠券</h4>
                    </div>
                }
                {coupons.map(o =>
                    <div key={o.Id}>
                        <div className="coupon">
                            <button className={`pull-right receive available`}
                                ref={(btn: HTMLButtonElement) => {
                                    if (!btn) return;
                                    btn.onclick = ui.buttonOnClick(() => {
                                        return this.receiveCoupon(o);
                                    }, { toast: '领取优惠劵成功' });
                                }}>
                                立即领取
                            </button>
                            <div className="main">
                                <div>
                                    ￥{o.Discount}
                                </div>
                                <div className="date">
                                    {`有效期 ${o.ValidBegin.toLocaleDateString()} 至 ${o.ValidEnd.toLocaleDateString()}`}
                                    <div>
                                        {o.Amount ? <span>满{o.Amount}元可以使用</span> : <span>任意金额可用使用</span>}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />
                    </div>
                )}
            </section>
        </>
    }
}


// export default function (page: Page) {
//     let shopping = page.createService(ShoppingService);

//     shopping.storeCoupons().then(coupons => {
//         // coupons = [];
//         ReactDOM.render(<StoreCouponsPage coupons={coupons} />, page.element);
//     });

// }